<template>
    <el-dialog v-if="dialogVisible" :append-to-body="true" :close-on-click-modal='false' :title="type==1?'添加规则组':'编辑规则组'" :visible.sync="dialogVisible" top="5vh" @close="resetForm('addRuleGroupForm')" width="1200px">
        <div class="over_box">
            <el-form label-position='left' label-width="108px" size="small" :model="addRuleGroupForm" :hide-required-asterisk='true' ref="addRuleGroupForm" :rules="addRuleGroupRules" class="add_form">
                <el-form-item label="规则组名称" prop="group_name">
                    <el-input v-model="addRuleGroupForm.group_name" placeholder="设置规则组名称" style="width:260px"></el-input>
                </el-form-item>
                <el-form-item label="重启roi" prop="call_back_roi" class="call_back_roi" :rules="addRuleGroupRules.group">
                    <div slot="label"> 
                        <el-select v-model="addRuleGroupForm.roi_type" placeholder="请选择roi" class="str_select">
                            <el-option label="直接支付roi" :value="0"></el-option>
                            <el-option label="7日总支付roi" :value="1"></el-option>
                        </el-select>
                    </div>
                    <el-input v-model="addRuleGroupForm.call_back_roi" placeholder="请输入" style="width:120px"></el-input>
                </el-form-item>
                <el-form-item label="规则设置">
                    <div class="rule_box">
                        <div class="flexbox flexcenter" style="margin-bottom:10px">
                            <span class="rule_titles">设置固定条件</span>
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:10px;margin-right:5px">
                                <path d="M10 17.5C12.071 17.5 13.9461 16.6605 15.3033 15.3033C16.6605 13.9461 17.5 12.071 17.5 10C17.5 7.92895 16.6605 6.05395 15.3033 4.6967C13.9461 3.33947 12.071 2.5 10 2.5C7.92895 2.5 6.05395 3.33947 4.6967 4.6967C3.33947 6.05395 2.5 7.92895 2.5 10C2.5 12.071 3.33947 13.9461 4.6967 15.3033C6.05395 16.6605 7.92895 17.5 10 17.5Z" stroke="#D1D2D6" stroke-width="1.6" stroke-linejoin="round" />
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5Z" fill="#D1D2D6" />
                                <path d="M10.1876 13.7501V8.50006H9.81262H9.43762" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8.875 13.75H11.5" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <span style="color:red">注意：所有范围取值遵循左闭右开的原则。如 roi 范围 1 - 2 则代表 1 &lt;= roi &lt; 2</span>
                        </div>
                        <div class="cod_item flexbox flexcenter" v-for="(item,index) in addRuleGroupForm.condition" :key="index">
                            <div class="cod_tag">固定条件{{index+1}}</div>
                            <div class="cod_text font_14 color_01 ml_12">计划<span class="blue_tips">总消耗</span>范围：</div>
                            <el-form-item label="" :prop="`condition.${index}.cost_left`" :rules="addRuleGroupRules.group" class="ml_12">
                                <el-input v-model="item.cost_left" placeholder="请输入" style="width:120px"></el-input>
                            </el-form-item>
                            <span class="cod_text font_14 color_01 ml_12">-</span>
                            <el-form-item label="" :prop="`condition.${index}.cost_right`" :rules="addRuleGroupRules.group" class="ml_12">
                                <el-input v-model="item.cost_right" placeholder="请输入" style="width:120px"></el-input>
                            </el-form-item>
                            <span class="cod_text font_14 color_01 ml_12">计划<span class="blue_tips">{{addRuleGroupForm.roi_type == '0'?'直接支付roi':'7日总支付roi'}}</span>范围：</span>
                            <el-form-item label="" :prop="`condition.${index}.roi_left`" :rules="addRuleGroupRules.group" class="ml_12">
                                <el-input v-model="item.roi_left" placeholder="请输入" style="width:120px"></el-input>
                            </el-form-item>
                            <span class="cod_text font_14 color_01 ml_12">-</span>
                            <el-form-item label="" :prop="`condition.${index}.roi_right`" :rules="addRuleGroupRules.group" class="ml_12">
                                <el-input v-model="item.roi_right" placeholder="请输入" style="width:120px"></el-input>
                            </el-form-item>
                            <div class="icon_btn ml_12" v-if="addRuleGroupForm.condition.length>1"><img src="../../assets/img/del_icon2.svg" alt="" @click="deletCondition(index)"></div>
                        </div>
                        <el-link type="primary" :underline="false" class="mt_5" @click="addCondition">添加条件</el-link>
                        <div class="divider_line"></div>
                        <span class="rule_titles">设置触发操作</span>
                        <div class="condition_box" v-for="(item,index) in addRuleGroupForm.operation" :key="index">
                            <div class="condition_item flexbox flexcenter flexbetween">
                                <div class="flexbox flexcenter">
                                    <div class="cod_tag">触发操作</div>
                                    <div class="cod_text font_14 color_01 ml_12">选择操作</div>
                                    <el-form-item label="" :prop="`operation.${index}.operation_type`" class="ml_12">
                                        <el-select v-model="item.operation_type" placeholder="操作" style="width:120px">
                                            <el-option label="关停计划" :value="0"></el-option>
                                            <el-option label="调预算" :value="1"></el-option>
                                            <el-option label="改出价" :value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <template v-if="item.operation_type==2">
                                        <svg class="ml_12" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M10 17.5C12.071 17.5 13.9461 16.6605 15.3033 15.3033C16.6605 13.9461 17.5 12.071 17.5 10C17.5 7.92895 16.6605 6.05395 15.3033 4.6967C13.9461 3.33947 12.071 2.5 10 2.5C7.92895 2.5 6.05395 3.33947 4.6967 4.6967C3.33947 6.05395 2.5 7.92895 2.5 10C2.5 12.071 3.33947 13.9461 4.6967 15.3033C6.05395 16.6605 7.92895 17.5 10 17.5Z" stroke="#D1D2D6" stroke-width="1.6" stroke-linejoin="round" />
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5Z" fill="#D1D2D6" />
                                            <path d="M10.1876 13.7501V8.50006H9.81262H9.43762" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M8.875 13.75H11.5" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                        <span class="font_14 color_02" style="margin-left:5px">调整出价的目的是为了当计划 消耗 和 roi 满足时，维持10分钟消耗(流速) 在优化设置的范围内</span>
                                    </template>
                                </div>
                                <div class="icon_btn" v-if="addRuleGroupForm.operation.length>1"><img src="../../assets/img/del_icon2.svg" alt="" @click="deletOperation(index)"></div>
                            </div>
                            <div v-if="item.operation_type==0" key="guanting">
                                <div class="condition_item flexbox flexcenter">
                                    <div class="cod_tag">触发条件</div>
                                    <div class="cod_text font_14 color_01 ml_12">固定条件</div>
                                    <el-form-item label="" :prop="`operation.${index}.condition`" class="ml_12" :rules="addRuleGroupRules.select">
                                        <el-select v-model="item.condition" placeholder="固定条件" style="width:120px">
                                            <el-option :label="'固定条件'+(index2+1)" :value="index2" v-for="(item2,index2) in addRuleGroupForm.condition" :key="index2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <div class="cod_text font_14 color_01 ml_12">10分钟消耗范围：</div>
                                    <el-form-item label="" :prop="`operation.${index}.speed_left`" :rules="addRuleGroupRules.group" class="">
                                        <el-input v-model="item.speed_left" placeholder="请输入" style="width:90px"></el-input>
                                    </el-form-item>
                                    <div class="cod_text font_14 color_01 ml_12"> - </div>
                                    <el-form-item label="" :prop="`operation.${index}.speed_right`" :rules="addRuleGroupRules.group" class="ml_12">
                                        <el-input v-model="item.speed_right" placeholder="请输入" style="width:90px"></el-input>
                                    </el-form-item>
                                    <div class="cod_text font_14 color_01 ml_12">10分钟roi范围：</div>
                                    <el-form-item label="" :prop="`operation.${index}.roi_left`" :rules="addRuleGroupRules.group" class="">
                                        <el-input v-model="item.roi_left" placeholder="请输入" style="width:90px"></el-input>
                                    </el-form-item>
                                    <div class="cod_text font_14 color_01 ml_12"> - </div>
                                    <el-form-item label="" :prop="`operation.${index}.roi_right`" :rules="addRuleGroupRules.group" class="ml_12">
                                        <el-input v-model="item.roi_right" placeholder="请输入" style="width:90px"></el-input>
                                    </el-form-item>
                                </div>
                                <div class="condition_item flexbox flexcenter noBline">
                                    <div class="cod_tag">操作设置</div>
                                    <div class="cod_text font_14 color_01 ml_12">满足条件，触发关停操作</div>
                                </div>
                                <div class="condition_tips">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M10 17.5C12.071 17.5 13.9461 16.6605 15.3033 15.3033C16.6605 13.9461 17.5 12.071 17.5 10C17.5 7.92895 16.6605 6.05395 15.3033 4.6967C13.9461 3.33947 12.071 2.5 10 2.5C7.92895 2.5 6.05395 3.33947 4.6967 4.6967C3.33947 6.05395 2.5 7.92895 2.5 10C2.5 12.071 3.33947 13.9461 4.6967 15.3033C6.05395 16.6605 7.92895 17.5 10 17.5Z" stroke="#D1D2D6" stroke-width="1.6" stroke-linejoin="round" />
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5Z" fill="#D1D2D6" />
                                        <path d="M10.1876 13.7501V8.50006H9.81262H9.43762" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M8.875 13.75H11.5" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    操作说明：如果满足计划总消耗在<span class="blue_tips">{{item.condition!==''?addRuleGroupForm.condition[item.condition].cost_left:''}}-{{item.condition!==''?addRuleGroupForm.condition[item.condition].cost_right:''}}</span>，计划{{addRuleGroupForm.roi_type == '0'?'直接支付roi':'7日总支付roi'}}在<span class="blue_tips">{{item.condition!==''?addRuleGroupForm.condition[item.condition].roi_left:''}}-{{item.condition!==''?addRuleGroupForm.condition[item.condition].roi_right:''}}</span>之间，且10分钟计划消耗在<span class="blue_tips">{{item.speed_left}}-{{item.speed_right}}</span>，10分钟计划roi在<span class="blue_tips">{{item.roi_left}} -{{item.roi_right}}</span>之间，则触发<span class="blue_tips">关停</span>操作
                                </div>
                            </div>
                            <div v-else-if="item.operation_type==1" key="yusuan">
                                <div class="condition_item flexbox flexcenter">
                                    <div class="cod_tag">触发条件</div>
                                    <div class="cod_text font_14 color_01 ml_12">固定条件</div>
                                    <el-form-item label="" :prop="`operation.${index}.condition`" class="ml_12" :rules="addRuleGroupRules.select">
                                        <el-select v-model="item.condition" placeholder="固定条件" style="width:120px">
                                            <el-option :label="'固定条件'+(index2+1)" :value="index2" v-for="(item2,index2) in addRuleGroupForm.condition" :key="index2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <div class="cod_text font_14 color_01 ml_12">预算花费到达：</div>
                                    <el-form-item label="" :prop="`operation.${index}.trigger_float`" :rules="addRuleGroupRules.group" class="ml_12">
                                        <el-input v-model="item.trigger_float" placeholder="请输入" style="width:120px">
                                            <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">%</i>
                                        </el-input>
                                    </el-form-item>
                                </div>
                                <div class="condition_item flexbox flexcenter noBline">
                                    <div class="cod_tag">操作设置</div>
                                    <div class="cod_text font_14 color_01 ml_12">上调预算</div>
                                    <el-form-item label="" :prop="`operation.${index}.trigger`" :rules="addRuleGroupRules.group" class="ml_12">
                                        <el-input v-model="item.trigger" placeholder="请输入" style="width:120px">
                                            <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                                        </el-input>
                                    </el-form-item>
                                </div>
                                <div class="condition_tips">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M10 17.5C12.071 17.5 13.9461 16.6605 15.3033 15.3033C16.6605 13.9461 17.5 12.071 17.5 10C17.5 7.92895 16.6605 6.05395 15.3033 4.6967C13.9461 3.33947 12.071 2.5 10 2.5C7.92895 2.5 6.05395 3.33947 4.6967 4.6967C3.33947 6.05395 2.5 7.92895 2.5 10C2.5 12.071 3.33947 13.9461 4.6967 15.3033C6.05395 16.6605 7.92895 17.5 10 17.5Z" stroke="#D1D2D6" stroke-width="1.6" stroke-linejoin="round" />
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5Z" fill="#D1D2D6" />
                                        <path d="M10.1876 13.7501V8.50006H9.81262H9.43762" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M8.875 13.75H11.5" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    操作说明：如果满足计划总消耗在<span class="blue_tips">{{item.condition!==''?addRuleGroupForm.condition[item.condition].cost_left:''}}-{{item.condition!==''?addRuleGroupForm.condition[item.condition].cost_right:''}}</span>，计划{{addRuleGroupForm.roi_type == '0'?'直接支付roi':'7日总支付roi'}}在 <span class="blue_tips">{{item.condition!==''?addRuleGroupForm.condition[item.condition].roi_left:''}}-{{item.condition!==''?addRuleGroupForm.condition[item.condition].roi_right:''}}</span> 之间，且消耗到达预算设置<span class="blue_tips">{{item.trigger_float}}%</span>，则触发<span class="blue_tips">调预算</span>操作，每次<span class="blue_tips">上调￥{{item.trigger}}</span>
                                </div>
                            </div>
                            <div v-else-if="item.operation_type==2" key="chujia">
                                <div class="condition_item flexbox flexcenter">
                                    <div class="cod_tag">出价目的</div>
                                    <div class="cod_text font_14 color_01 ml_12">维持10分钟计划消耗在：</div>
                                    <el-form-item label="" :prop="`operation.${index}.speed_left`" :rules="addRuleGroupRules.group">
                                        <el-input v-model="item.speed_left" placeholder="请输入" style="width:120px"></el-input>
                                    </el-form-item>
                                    <span class="cod_text font_14 color_01 ml_12">-</span>
                                    <el-form-item label="" :prop="`operation.${index}.speed_right`" :rules="addRuleGroupRules.group" class="ml_12">
                                        <el-input v-model="item.speed_right" placeholder="请输入" style="width:120px"></el-input>
                                    </el-form-item>
                                    <div class="cod_text font_14 color_01 ml_12">之间</div>
                                </div>
                                <div class="condition_item flexbox flexcenter">
                                    <div class="cod_tag">触发条件</div>
                                    <div class="cod_text font_14 color_01 ml_12">固定条件</div>
                                    <el-form-item label="" :prop="`operation.${index}.condition`" class="ml_12" :rules="addRuleGroupRules.select">
                                        <el-select v-model="item.condition" placeholder="固定条件" style="width:120px">
                                            <el-option :label="'固定条件'+(index2+1)" :value="index2" v-for="(item2,index2) in addRuleGroupForm.condition" :key="index2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <div class="cod_text font_14 color_01 ml_12">出价范围</div>
                                    <el-form-item label="" :prop="`operation.${index}.price_left`" :rules="addRuleGroupRules.group" class="ml_12">
                                        <el-input v-model="item.price_left" placeholder="最小值" style="width:120px">
                                            <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                                        </el-input>
                                    </el-form-item>
                                    <span class="cod_text font_14 color_01 ml_12">-</span>
                                    <el-form-item label="" :prop="`operation.${index}.price_right`" :rules="addRuleGroupRules.group" class="ml_12">
                                        <el-input v-model="item.price_right" placeholder="最大值" style="width:120px">
                                            <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                                        </el-input>
                                    </el-form-item>
                                </div>
                                <div class="condition_item flexbox flexcenter noBline">
                                    <div class="cod_tag">操作设置</div>
                                    <div class="cod_text font_14 color_01 ml_12">出价比例</div>
                                    <el-form-item label="" :prop="`operation.${index}.percentage`" :rules="addRuleGroupRules.group" class="ml_12">
                                        <el-input v-model="item.percentage" placeholder="请输入" style="width:120px">
                                            <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">%</i>
                                        </el-input>
                                    </el-form-item>
                                    <div class="cod_text font_14 color_01 ml_12">触发频率</div>
                                    <el-form-item label="" :prop="`operation.${index}.after_time`" class="ml_12">
                                        <el-select v-model="item.after_time" placeholder="触发频率" style="width:120px">
                                            <!-- <el-option label="每30分钟" value="30"></el-option>
                                            <el-option label="每60分钟" value="60"></el-option> -->
                                            <el-option label="每90分钟" value="90"></el-option>
                                            <el-option label="每180分钟" value="180"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                                <div class="condition_tips">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M10 17.5C12.071 17.5 13.9461 16.6605 15.3033 15.3033C16.6605 13.9461 17.5 12.071 17.5 10C17.5 7.92895 16.6605 6.05395 15.3033 4.6967C13.9461 3.33947 12.071 2.5 10 2.5C7.92895 2.5 6.05395 3.33947 4.6967 4.6967C3.33947 6.05395 2.5 7.92895 2.5 10C2.5 12.071 3.33947 13.9461 4.6967 15.3033C6.05395 16.6605 7.92895 17.5 10 17.5Z" stroke="#D1D2D6" stroke-width="1.6" stroke-linejoin="round" />
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5Z" fill="#D1D2D6" />
                                        <path d="M10.1876 13.7501V8.50006H9.81262H9.43762" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M8.875 13.75H11.5" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    操作说明：如果满足计划总消耗在 <span class="blue_tips">{{item.condition!==''?addRuleGroupForm.condition[item.condition].cost_left:''}}-{{item.condition!==''?addRuleGroupForm.condition[item.condition].cost_right:''}} </span>之间 ，计划{{addRuleGroupForm.roi_type == '0'?'直接支付roi':'7日总支付roi'}}在<span class="blue_tips">{{item.condition!==''?addRuleGroupForm.condition[item.condition].roi_left:''}}-{{item.condition!==''?addRuleGroupForm.condition[item.condition].roi_right:''}}</span>之间，需要维持10分钟消耗（流速）在 <span class="blue_tips">{{item.speed_left}}-{{item.speed_right}}</span>之间。则当10分钟消耗（流速）小于 <span class="blue_tips">{{item.speed_left}}</span> 时触发改出价操作出价<span class="blue_tips">上调 {{item.percentage}}%</span>，反之当10分钟消耗（流速）大于 <span class="blue_tips">{{item.speed_right}}</span> 时触发改出价操作出价<span class="blue_tips">下调 {{item.percentage}}%</span>。两次改出价操作时间间隔为 <span class="blue_tips">{{item.after_time}}分钟</span>，出价范围在<span class="blue_tips">{{item.price_left}}-{{item.price_right}}</span> 之间
                                </div>
                            </div>
                        </div>
                        <el-link type="primary" :underline="false" @click="addOperation">添加操作</el-link>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm('addRuleGroupForm')" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm('addRuleGroupForm')" class="el-button-width">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        var maxValue = (rule, value, callback) => {
            if (Number(value) > 900000) {
                callback(new Error("数值不能超过900000"));
            }
            callback();
        };
        return {
            loading: false,
            dialogVisible: false,
            type: null,
            addRuleGroupForm: {
                group_name: "",
                call_back_roi: "",
                roi_type: 0,
                condition: [
                    {
                        roi_left: "",
                        roi_right: "",
                        cost_right: "",
                        cost_left: "",
                    },
                ],
                operation: [
                    {
                        condition: 0,
                        operation_type: 0,
                        speed_left: "",
                        speed_right: "",
                        roi_left: "",
                        roi_right: "",
                        trigger_float: "",
                        trigger: "",
                        percentage: "",
                        price_left: "",
                        price_right: "",
                        after_time: "90",
                    },
                ],
            },

            addRuleGroupRules: {
                group_name: [
                    {
                        required: true,
                        message: "请输入规则组名称",
                        trigger: ["blur", "change"],
                    },
                ],
                call_back_roi: [
                    {
                        required: true,
                        message: "请输入重启roi",
                        trigger: ["blur", "change"],
                    },
                ],
                select: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: ["blur", "change"],
                    },
                ],
                group: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern:
                            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        required: true,
                        message: "请输入正确数值",
                        trigger: ["blur", "change"],
                    },
                    { validator: maxValue, trigger: ["blur", "change"] },
                ],
            },
        };
    },
    created() {},
    methods: {
        // 添加条件
        addCondition() {
            this.addRuleGroupForm.condition.push({
                roi_left: "",
                roi_right: "",
                cost_right: "",
                cost_left: "",
            });
        },

        // 删除条件
        deletCondition(index) {
            for (let i in this.addRuleGroupForm.operation) {
                if (
                    this.addRuleGroupForm.operation[i].condition == index ||
                    this.addRuleGroupForm.operation[i].condition > index
                ) {
                    this.addRuleGroupForm.operation[i].condition = "";
                }
            }
            this.addRuleGroupForm.condition.splice(index, 1);
        },

        // 添加操作
        addOperation() {
            this.addRuleGroupForm.operation.push({
                condition: 0,
                operation_type: 0,
                speed_left: "",
                speed_right: "",
                roi_left: "",
                roi_right: "",
                trigger_float: "",
                trigger: "",
                percentage: "",
                price_left: "",
                price_right: "",
                after_time: "90",
            });
        },

        // 删除操作
        deletOperation(index) {
            this.addRuleGroupForm.operation.splice(index, 1);
        },

        // 提交添加
        submitForm(formName) {
            for (let i in this.addRuleGroupForm.operation) {
                if (this.addRuleGroupForm.operation[i].operation_type == 0) {
                    this.addRuleGroupForm.operation[i].trigger_float = "";
                    this.addRuleGroupForm.operation[i].trigger = "";
                    this.addRuleGroupForm.operation[i].percentage = "";
                    this.addRuleGroupForm.operation[i].price_left = "";
                    this.addRuleGroupForm.operation[i].price_right = "";
                } else if (
                    this.addRuleGroupForm.operation[i].operation_type == 1
                ) {
                    this.addRuleGroupForm.operation[i].speed_left = "";
                    this.addRuleGroupForm.operation[i].speed_right = "";
                    this.addRuleGroupForm.operation[i].roi_left = "";
                    this.addRuleGroupForm.operation[i].roi_right = "";
                    this.addRuleGroupForm.operation[i].percentage = "";
                    this.addRuleGroupForm.operation[i].price_left = "";
                    this.addRuleGroupForm.operation[i].price_right = "";
                } else if (
                    this.addRuleGroupForm.operation[i].operation_type == 2
                ) {
                    this.addRuleGroupForm.operation[i].roi_left = "";
                    this.addRuleGroupForm.operation[i].roi_right = "";
                    this.addRuleGroupForm.operation[i].trigger_float = "";
                    this.addRuleGroupForm.operation[i].trigger = "";
                }
            }
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.$emit("getRulesData", this.addRuleGroupForm);
                    this.resetForm("addRuleGroupForm");
                } else {
                    return false;
                }
            });
        },

        // 关闭重置表单
        resetForm(formName) {
            this.dialogVisible = false;
            this.addRuleGroupForm = {
                group_name: "",
                call_back_roi: "",
                roi_type:0,
                condition: [
                    {
                        roi_left: "",
                        roi_right: "",
                        cost_right: "",
                        cost_left: "",
                    },
                ],
                operation: [
                    {
                        condition: 0,
                        operation_type: 0,
                        speed_left: "",
                        speed_right: "",
                        roi_left: "",
                        roi_right: "",
                        trigger_float: "",
                        trigger: "",
                        percentage: "",
                        price_left: "",
                        price_right: "",
                        after_time: "90",
                    },
                ],
            };
            // this.$refs[formName].resetFields();
        },
    },
    components: {},
};
</script>


<style scoped>
/deep/ .el-form-item__label{
    padding:0 !important;
}
.call_back_roi >>> .el-form-item__label{
    margin-top: 0px !important;
}
.str_select /deep/ .el-input__inner{
    padding-left: 0 !important;
    border-color: #fff !important;
    padding-right: 0px !important;
}

.over_box {
    max-height: 670px;
}
.rule_box {
    max-height: 500px;
    overflow-y: auto;
}
.cod_text {
    line-height: 14px;
}
.rule_titles {
    font-size: 13px;
    color: #17233d;
    font-weight: bold;
}
.blue_tips {
    color: #4475ff;
}
.condition_box {
    border: 1px solid #ebebeb;
    border-radius: 4px;
    background-color: #f8f9fb;
    margin-bottom: 15px;
}
.condition_item {
    padding: 12px 0;
    margin: 0 20px;
    border-bottom: 1px solid #ebebeb;
    position: relative;
    z-index: 2;
}
.condition_item.noBline {
    border-bottom: 0;
}
.condition_tips {
    position: relative;
    font-size: 13px;
    line-height: 16px;
    color: #616c85;
    padding: 13px 20px 13px 45px;
    background-color: #fff;
}
.condition_tips svg {
    position: absolute;
    left: 20px;
    top: 10px;
}
</style>
